<template>
  <div>
    <breadcrumb></breadcrumb>
    <div class="header">
      <div class="searchBox">
        <el-input placeholder="请输入内容" v-model="searchValue" class="searchInput" @input="changeSearchValue"
          @keyup.enter.native="getList1()">
          <!-- orderNo:"",//订单编号
        startTime:"",//开始时间
        endTime:"",//结束时间
        customerName:"",//接单人
        ownerName:"",//货主名称
        orderStatus:"",//订单状态
        planName:"",//计划名称
        ownerName:"",//货主名称
        orderNo:"",//订单编号 -->
          <el-select v-model="selectValue" slot="prepend" placeholder="请选择" class="selectType" @change="changeSelect">
            <el-option v-for="item in searchArr" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
          <el-button slot="append" class="searchBtn" @click="getList1">搜索</el-button>
        </el-input>
        <div class="zankai" @click="changeUnfold()">
          {{ isUnfold ? "收起" : "展开"
          }}<i class="el-icon-arrow-up" style="margin-left: 4px" :class="{ UnfoldActive: !isUnfold }"></i>
        </div>
      </div>

      <div class="zankai_area" v-show="isUnfold == true">
        <el-row>
          <el-col :span="8">
            <div class="inputBox">
              <div class="label">货源方</div>
              <input type="text" v-model="cargoName" class="input" placeholder="请输入关键字" @keyup.enter="getList1()" />
            </div>
          </el-col>

          <el-col :span="8">
            <div class="inputBox">
              <div class="label">项目名称</div>
              <input type="text" v-model="projectName" class="input" placeholder="请输入关键字" @keyup.enter="getList1()" />
            </div>
          </el-col>
          <!--          <el-col :span="8">-->
          <!--            <div class="inputBox">-->
          <!--              <div class="label">下单人</div>-->
          <!--              <input type="text" v-model="customerName" class="input" placeholder="请输入关键字" @keyup.enter="getList()" />-->
          <!--            </div>-->
          <!--          </el-col>-->
          <!-- <el-col :span="8">
            <div class="inputBox">
              <div class="label">接单人</div>
              <input type="text" v-model="supplierName" class="input" placeholder="请输入关键字" @keyup.enter="getList()" />
            </div>
          </el-col> -->
          <el-col :span="8">
            <div class="inputBox">
              <div class="label">订单状态</div>
              <el-select v-model="orderStatus" placeholder="请选择" class="orderSelector">
                <el-option v-for="item in orderStateArr" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="inputBox">
              <div class="label">承运车队</div>
              <input type="text" v-model="fleetName" class="input" placeholder="请输入关键字" @keyup.enter="getList1()" />
            </div>
          </el-col>

          <el-col :span="8">
            <div class="inputBox" style="display: flex">
              <div class="label">创建时间</div>

              <el-date-picker v-model="createTime" type="datetimerange" :picker-options="pickerOptions"
                range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right"
                value-format="yyyy-MM-dd HH:mm:ss">
              </el-date-picker>
            </div>
          </el-col>
          <el-col :span="8">
            <el-button type="primary" size="small" icon="el-icon-search" style="margin-left: 24px; margin-bottom: 21px"
              @click="getList1()">搜索</el-button>
            <el-button type="plain" size="small" icon="el-icon-refresh-right" @click="clearUp">清空</el-button>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="main">
      <div class="main_head">
        <div class="main_head_left">
          已选择<span style="color: #1890ff">{{ selectionLegth }}</span>项
        </div>
        <div class="main_head_right">
          <button class="addCargoOwner" @click="Download">
            下载EXCEL模板
          </button>
          <el-upload ref="upload" action="https://jsonplaceholder.typicode.com/posts/" :before-upload="upload"
            :show-file-list="false" accept=".xlsx,.xls" style="width: 200px; display: inline-flex">
            <button class="addCargoOwner">
              导入EXCEL创建订单
            </button>
          </el-upload>
          <button class="addCargoOwner" @click="assignment">
            指派司机建单
          </button>
          <button class="addCargoOwner" @click="$router.push('/home/selfOperatedOrder/selfCreatedOrder')">
            创建订单
          </button>
          <button class="addCargoOwner" @click="publish">一键发布</button>
          <el-select class="selector" v-model="operateValue" placeholder="批量操作" size="small" @change="BatchOperation">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
      </div>

      <div class="list">
        <el-table :data="records" style="width: 100%" @selection-change="handleSelectionChange" header-align="left"
          ref="registTable">
          <el-table-column align="left" type="selection" width="50"></el-table-column>
          <el-table-column align="left" prop="SerialNumber" width="80" label="序号">
            <template slot-scope="scope">
              <div>
                <div>{{ scope.$index + 1 + Number(pageSize) * (pageCurrent - 1) }}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="left" prop="orderStatusStr" label="订单状态" width="100px">
            <template slot-scope="scope">
              <!-- NEW( code: 1， info:"新订单") -->
              <div class="tag Canceled" v-if="scope.row.abnormal">
                <!-- CANCEL( code: 12， info:"订单取消"]; -->
                <div class="dian"></div>
                <div class="text">已驳回</div>
              </div>
              <div class="tag gery" v-else-if="scope.row.orderStatus.value == 1">
                <div class="dian"></div>
                <div class="text">未发布</div>
              </div>
              <!-- HANG_UP( code: 2， info:"挂起")，PAYING( code: 3， info:"等待付款")PAID( code: 4，info:"已付款") -->
              <div class="tag waitDispatch" v-else-if="scope.row.orderStatus.value == 4 ||
                scope.row.orderStatus.value == 2 ||
                scope.row.orderStatus.value == 3
              ">
                <div class="dian"></div>
                <div class="text">未起运</div>
              </div>
              <div class="tag dispatched" v-else-if="scope.row.orderStatus.value == 5 ||
                scope.row.orderStatus.value == 6
              ">
                <!--  SHIPMENTING( code: 5,SHIPMENTED( code: 6info:"已发货")-->
                <div class="dian"></div>
                <div class="text">运输中</div>
              </div>
              <div class="tag dispatched" v-else-if="scope.row.orderStatus.value == 7">
                <div class="dian"></div>
                <!-- WAITING_PAY( code: 7，info:"等待到付") -->
                <div class="text">已送达</div>
              </div>
              <div class="tag dispatched" v-else-if="scope.row.orderStatus.value == 8 ||
                scope.row.orderStatus.value == 9
              ">
                <div class="dian"></div>
                <!-- TO_SIGN( code: 8，info:"待签收")，WAITING_RECEIPT( code: 9，info:"等待签收回单”) -->
                <div class="text">待签收</div>
              </div>
              <div class="tag complete" v-else-if="scope.row.orderStatus.value == 11 ||
                scope.row.orderStatus.value == 10
              ">
                <div class="dian"></div>
                <!-- COMPLETED( code: 11， info:"已完成") code:10 已签收 -->
                <div class="text">已完成</div>
              </div>
              <div class="tag Canceled" v-else-if="scope.row.orderStatus.value == 12">
                <!-- CANCEL( code: 12， info:"订单取消"]; -->
                <div class="dian"></div>
                <div class="text">已取消</div>
              </div>
              <div class="tag dispatched" v-else-if="scope.row.orderStatus.value == 13">
                <div class="dian"></div>
                <!-- TO_SIGN( code: 8，info:"待签收")，WAITING_RECEIPT( code: 9，info:"等待签收回单”) -->
                <div class="text">待调度</div>
              </div>

            </template>
          </el-table-column>
          <el-table-column align="left" prop="orderNo" label="订单编号"></el-table-column>
          <el-table-column align="left" prop="ownerName" label="货源方">
          </el-table-column>
          <el-table-column align="left" prop="projectName" label="项目名称">
          </el-table-column>
          <el-table-column align="left" prop="fleetName" label="承运车队">
          </el-table-column>
          <el-table-column align="left" prop="customerName" label="司机">
            <template slot-scope="scope">
              <div v-for="(item,k) in scope.row.orderDispatchVos" :key="item.driverId">
               {{k==0 ? item.driverName:item.driverName+',' }}
              </div>
            </template>
          </el-table-column>
          <!--          <el-table-column align="left" prop="lineName" label="线路">-->
          <!--            <template slot-scope="scope">-->
          <!--              <div>-->
          <!--                {{ scope.row.lineName == null || scope.row.lineName == '' ? '&#45;&#45;.&#45;&#45;' : scope.row.lineName }}-->
          <!--              </div>-->
          <!--            </template>-->
          <!--          </el-table-column>-->
          <el-table-column align="left" prop="createTime" label="创建时间" sortable>
          </el-table-column>
          <el-table-column align="left" label="操作" width="105">
            <template slot-scope="scope">
              <div>
                <el-button type="text" size="small" v-if="scope.row.orderStatus.value == 1 & !scope.row.abnormal"
                  @click="
                    $router.push({
                      path: '/home/selfOperatedOrder/editCarrierOrder',
                      query: { id: scope.row.orderId },
                    })
                    ">编辑</el-button>
                <el-button type="text" size="small" v-if="scope.row.abnormal" @click="
                  $router.push({
                    path: '/home/selfOperatedOrder/editCarrierOrder',
                    query: { id: scope.row.orderId, type: 2 },
                  })
                  ">编辑</el-button>
                <el-button type="text" size="small" v-if="scope.row.orderStatus.value != 1" @click="
                  $router.push({
                    path: '/home/selfOperatedOrder/list/details',
                    query: { id: scope.row.orderId },
                  })
                  ">详情</el-button>
                <!--      <el-button type="text" size="small">更多</el-button> -->
                <el-button type="text" size="small" @click="DeleteItem(scope.row.orderId)" v-if="scope.row.orderStatus.value != 12 & scope.row.orderStatus.value != 11
                ">取消</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <div class="paginationBox">
        <el-pagination @current-change="changePages($event)" class="pagination" background
          layout="slot,prev, pager, next" :total="data.total * 1" :page-size="pageSize * 1" :pager-count="5">
          <template slot>
            <span style="
                color: #686868;
                font-size: 12px;
                margin-right: 20px;
                display: inline-block;
              ">共{{ data.total }}条,每页{{ pageSize }}条</span>
          </template>
        </el-pagination>
      </div>
    </div>
    <!-- <el-button
      type="text"
      size="small"
      @click="
        $router.push({
          path: '/home/selfOperatedOrder/list/details',
          query: { id: 16545 },
        })
      "
      >测试详情</el-button
    > -->

    <el-dialog title="指派司机建单" :visible.sync="assignmentShow" width="40%" :before-close="handleClose">
      <div class="formItem" style="width: 100%;">
        <el-form :model="formData" :rules="SchedulingRules" ref="transactionForm" label-width="117px" class="input_form"
          style="width: 100%;">
          <el-row style="width: 100%">
            <el-col :span="20">
              <el-form-item label="货源方" prop="ownerId">
                <el-select v-model="formData.ownerId" placeholder="请选择货源方" @focus="change(0)"
                  @change="changeMeasureUnit">
                  <el-option v-for="item in flist" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="20">
              <el-form-item label="项目名称" prop="projectId">
                <el-select v-model="formData.projectId" placeholder="请选择项目名称" @focus="change(1)"
                  @change="changeMeasureUnit">
                  <el-option v-for="item in flist1" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="20">
              <el-form-item label="计价方式" prop="jijia">
                <el-select v-model="formData.jijia" placeholder="按货价" :disabled="true" @change="changeMeasureUnit">
                  <el-option v-for="item in flist" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="指派车队" prop="fleetId">
                <el-select v-model="formData.fleetId" placeholder="请选择车队" @focus="change(2)"
                  @change="changeMeasureUnit">
                  <el-option v-for="item in flist2" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="指派司机" prop="driverId">
                <el-select v-model="formData.driverId" placeholder="请选择司机" @focus="change(3)"
                  @change="changeMeasureUnit">
                  <el-option v-for="item in flist3" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="20">
              <el-form-item label="发货地" prop="lineId">
                <el-select v-model="formData.lineId" placeholder="选择发货地" @focus="change(4)" @change="changeMeasureUnit">
                  <el-option v-for="item in flist4" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="assignmentShow = false">取 消</el-button>
        <el-button type="primary" @click="sumbit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import breadcrumb from "@/components/breadcrumb";
import httpApi from "@/http";
import { read, utils } from "xlsx";
export default {
  data() {
    return {
      formData: {
        ownerId: "",// 货主ID
        fleetId: "",// 车队ID   
        driverId: "",// 司机ID 
        lineId: "",// 线路ID
        projectId: "",// 项目ID
        jijia: '按货价'
      },

      flist: [],
      flist1: [],
      flist2: [],
      flist3: [],
      flist4: [],
      SchedulingRules: {
        ownerId: [
          { required: true, message: "请保持信息完整", trigger: "blur" },
        ],
        fleetId: [
          { required: true, message: "请保持信息完整", trigger: "blur" },
        ],
        jijia: [
          { required: true, message: "请保持信息完整", trigger: "blur" },
        ],
        driverId: [
          { required: true, message: "请保持信息完整", trigger: "blur" },
        ],
        projectId: [
          { required: true, message: "请保持信息完整", trigger: "blur" },
        ],
        lineId: [
          { required: true, message: "请保持信息完整", trigger: "blur" },
        ],
      },
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },

      createTime: "", //创建时间
      isUnfold: false,
      // supplierName: "", //接单人
      orderNo: "", //订单编号
      startTime: "", //开始时间
      endTime: "", //结束时间
      customerName: "", //下单人
      cargoName: "", //货主名称
      orderStatus: "", //订单状态
      planName: "", //计划名称
      projectName: "", //项目名称
      fleetName: "",//承运车队名称


      orderStateArr: [
        {
          value: "1",
          label: "未发布",
        },
        {
          value: "2,3,4",
          label: "未起运",
        },
        {
          value: "5,6",
          label: "运输中",
        },
        {
          value: "7",
          label: "已送达",
        },
        {
          value: "8,9",
          label: "待签收",
        },
        {
          value: "11",
          label: "已完成",
        },
        {
          value: "12",
          label: "已取消",
        },
        {
          value: "13",
          label: "待调度",
        },
        {
          value: "20",
          label: "已超时",
        }
      ],
      searchValue: "",

      searchArr: [
        { label: "订单编号", value: "orderNo" },
        { label: "货源方", value: "cargoName" },
        // { label: "计划名称", value: "planName" },
        { label: "项目名称", value: "projectName" },
        { label: "承运车队", value: "fleetName" },
        // { label: "订单状态", value: "orderStatus" },
        // { label: "承运方", value: "supplierName" },
        // { label: "开始时间", value: "startTime" },
        // { label: "结束时间", value: "endTime" },
      ],
      operateValue: "",
      searchFrom: {},
      selectValue: "orderNo",

      data: {},
      records: [],
      options: [
        {
          value: "批量取消",
          label: "批量取消",
        },
      ],
      multipleSelection: [], //存放批量选择的订单
      selectionLegth: 0, //已选择几项
      operateValue: "",
      enterpriseName: "", //企业名称 值
      pageCurrent: "1", //当前页
      pageSize: "15", //每页15条
      assignmentShow: false,
      changeCont: 0

    };
  },

  methods: {
    //下载模板
    Download() {
      const a = document.createElement("a");
      a.href = "/mobanOrder.xlsx";
      a.download = "mobanOrder.xlsx";
      a.style.display = "none";
      document.body.appendChild(a);
      a.click();
      a.remove();
    },
    //确认指派司机建单
    async sumbit() {

      for (let k in this.formData) {
        if (!this.formData[k]) {
          //console.log(this.formData[k])
          //console.log(k)
          this.$message.error('请填写完整信息')
          return false
        }
      }
      let res = await this.$http.orderApi.addAssignDriverOrder(this.formData)
      if (res.data.code == 200) {
        this.$message.success('创建成功')
        this.assignmentShow = false
      }
    },
    //拿货主信息
    async Selectcargoe(e) {
      let res = await this.$http.orderApi.dropDownByOrder();
      this.flist = []
      let cont = res.data.records
      cont.forEach((item, i) => {
        this.flist.push({ value: item.ownerId, label: item.name })
      })
      if (e != 2) {
        this.formData.ownerId = this.flist[0].value
      }
      this.Selectitem()
      this.Selectline()
    },
    //拿项目信息
    async Selectitem() {
      let res = await this.$http.orderApi.project_down({
        ownerId: this.formData.ownerId,
      });
      this.flist1 = []
      let cont = res.data.records
      cont.forEach((item, i) => {
        this.flist1.push({ value: item.projectId, label: item.name })
      })
      this.formData.projectId = this.flist1[0].value
    },
    // 选择车队
    async SelectAccept(e) {
      let res = await this.$http.orderApi.dropDownFleet();
      this.flist2 = []
      let cont = res.data.data.records
      cont.forEach((item, i) => {
        this.flist2.push({ value: item.fleetId, label: item.fleetName })
      })
      if (e != 2) {
        this.formData.fleetId = this.flist2[0].value
      }
      this.AcceptListFleet()

    },
    //选择司机
    async AcceptListFleet(e) {
      let parmas = {
        fleetId: this.formData.fleetId,
      };
      let res = await this.$http.orderApi.dropDownDriver(parmas);
      this.flist3 = []
      let cont = res.data.data
      cont.forEach((item, i) => {
        this.flist3.push({ value: item.driverId, label: item.driverName })
      })
    },
    //拿线路信息
    async Selectline() {
      let res = await this.$http.orderApi.userLineDownList({
        ownerId: this.formData.ownerId,
        lineName: ''
      });
      this.flist4 = []
      let cont = res.data.data
      cont.forEach((item, i) => {
        this.flist4.push({ value: item.lineId, label: item.lineName })
      })
      this.formData.lineId = this.flist4[0].value
    },
    change(e) {
      this.changeCont = e


      if (e == 1 & !this.formData.ownerId) {
        this.$message.error('请先选择货源方')
        return false
      }
      if (e == 4 & !this.formData.ownerId) {
        this.$message.error('请先选择货源方')
        return false
      }
      if (e == 3 & !this.formData.fleetId) {
        this.$message.error('请先选择车队')
        return false
      }
    },
    changeMeasureUnit() {
      if (this.changeCont == 0) {
        this.formData.lineId = ''
        this.formData.projectId = ''
        this.Selectcargoe(2)
      } else if (this.changeCont == 2) {
        this.formData.driverId = ''
        this.SelectAccept(2)
      }
    },
    assignment() {
      this.Selectcargoe(1)
      this.SelectAccept(1)
      this.assignmentShow = true
    },

    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => { });
    },
    //批量订单的创建，excle
    //导入excel文档
    upload(file, fileList) {
      let files = { 0: file };
      this.readExcel1(files);
    },
    // 获取导入excel文档的数据
    readExcel1(files) {
      var that = this;
      ////console.log(files);
      // 此处判断不严谨，思路只是根据传入的参数校验数据的完整性，可根据自己需求修改
      // 如果没有文件名
      if (files.length <= 0) {
        return;
      }
      if (!/\.(xls|xlsx)$/.test(files[0].name.toLowerCase())) {
        this.$Message.error("上传格式不正确，请上传xls或者xlsx格式");
        return;
      }
      const fileReader = new FileReader();
      fileReader.onload = (ev) => {
        try {
          const data = ev.target.result;
          const workbook = read(data, {
            type: "binary",
          });
          const wsname = workbook.SheetNames[0];
          const ws = utils.sheet_to_json(workbook.Sheets[wsname]);
          let cont = JSON.stringify(ws)
            .replace(/编号/g, "cid")
            .replace(/货主（必填）/g, "ownerName")
            .replace(/项目名称（必填）/g, "projectName")
            .replace(/计量单位（必填）/g, "measureUnit")
            .replace(/计价方式（必填）/g, "pricingMethod")
            .replace(/运量（必填）/g, "cargoWeight")
            .replace(/货主单价/g, "ownerUnitPrice")
            .replace(/货主金额/g, "totalAmount")
            .replace(/司机单价（必填）/g, "unitPrice")
            .replace(/司机运费（必填）/g, "freight")
            .replace(/发货地省市区（必填）/g, "start")
            .replace(/发货地详细地址（必填）/g, "startAddress")
            .replace(/发货地联系人（必填）/g, "startMan")
            .replace(/发货地联系人电话（必填）/g, "startphone")
            .replace(/目的地省市（必填）/g, "end")
            .replace(/目的地详细地址（必填）/g, "endAddress")
            .replace(/目的地联系人（必填）/g, "endMan")
            .replace(/目的地联系人电话（必填）/g, "endphone")
            .replace(/司机名称（必填）/g, "dirver")
            .replace(/司机电话（必填）/g, "dirverphone")
            .replace(/货物类别/g, "leibie")
            .replace(/货物名称/g, "name")
            .replace(/货物数量/g, "number")
            .replace(/品牌/g, "pinpai")
            .replace(/货物规格/g, "guige")
            .replace(/运量/g, "yunliang")
            .replace(/备注/g, "remak")
            .replace(/订单截止时间/g, "endTime")
            .replace(/发货时间/g, "statyTime")
            .replace(/送达时间/g, "shouTime")
          cont = JSON.parse(cont)
          let map = [];
          let res = [];



          cont.forEach(item => {
            if (map.indexOf(item.cid) < 0) {
              res.push({
                cid: item.cid,
                oid: [item]
              })
              map.push(item.cid);
            } else {
              res.forEach(obj => {
                if (obj.cid == item.cid) {
                  obj.oid.push(item)
                }
              })
            }
          })
          console.log(res)
          let fromMood = []
          res.forEach((item, i) => {
            item.oid.forEach((meth, k) => {
              if (k == 0) {
                fromMood.push({
                  cid: item.cid,
                  ownerName: meth.ownerName,
                  projectName: meth.projectName,
                  measureUnit: meth.measureUnit,
                  pricingMethod: meth.pricingMethod,
                  cargoWeight: meth.cargoWeight,
                  ownerUnitPrice: meth.ownerUnitPrice,
                  totalAmount: meth.totalAmount,
                  unitPrice: meth.unitPrice,
                  freight: meth.freight,
                  startAddress: [],
                  endAddress: [],
                  drivers: [],
                  cargo: [],
                  orderOwners: [],
                  shippedTime: meth.statyTime,
                  endTime: meth.endTime,
                  finishTime: meth.shouTime,
                })
                fromMood.forEach(key => {
                  if (key.cid == item.cid) {
                    if (meth.ownerName != undefined) {
                      key.orderOwners.push({
                        ownerName: meth.ownerName,
                        projectName: meth.projectName, totalAmount: meth.totalAmount, ownerUnitPrice: meth.ownerUnitPrice
                      })
                    }
                    if (meth.start != undefined) {
                      key.startAddress.push({ province: meth.start, address: meth.startAddress, contact: meth.startMan, phone: meth.startphone })
                    }
                    if (meth.end != undefined) {
                      key.endAddress.push({ province: meth.end, address: meth.endAddress, contact: meth.endMan, phone: meth.endphone })
                    }
                    if (meth.dirver != undefined) {
                      key.drivers.push({ driverName: meth.dirver, phone: meth.dirverphone })
                    }
                    if (meth.leibie != undefined) {
                      key.cargo.push({
                        cargoName: meth.leibie,
                        cargoType: meth.name,
                        cargoQuantity: meth.number,
                        cargoWeight: meth.yunliang,
                        description: meth.remak,
                        brand: meth.pinpai,
                        cargoVolume: meth.guige,
                      })
                    }
                  }
                })
              } else {
                fromMood.forEach(key => {
                  if (key.cid == item.cid) {
                    if (meth.ownerName != undefined) {
                      key.orderOwners.push({
                        ownerName: meth.ownerName,
                        projectName: meth.projectName, totalAmount: meth.totalAmount, ownerUnitPrice: meth.ownerUnitPrice
                      })
                    }
                    if (meth.end != undefined) {
                      key.endAddress.push({ province: meth.end, address: meth.endAddress, contact: meth.endMan, phone: meth.endphone })
                    }
                    if (meth.dirver != undefined) {
                      key.drivers.push({ driverName: meth.dirver, phone: meth.dirverphone })
                    }
                    if (meth.leibie != undefined) {
                      key.cargo.push({
                        cargoName: meth.leibie,
                        cargoType: meth.name,
                        cargoQuantity: meth.number,
                        cargoWeight: meth.yunliang,
                        description: meth.remak,
                        brand: meth.pinpai,
                        cargoVolume: meth.guige,
                      })
                    }
                  }
                })
              }
            })
          })
          this.$http.orderApi.batchCreateOrder(fromMood).then((res) => {
            if (res.data.code == 200) {
              this.$message.success('操作成功')
              this.getList();
            }
          })
        } catch (e) {
          return false;
        }
      };
      fileReader.readAsBinaryString(files[0]);
    },
    // 一键发布
    async publish() {
      let cont = [];
      let Idmood = [];

      cont = this.$refs.registTable.selection;
      ////console.log("cont", cont);
      if (cont.length > 0) {
        cont.forEach((item, i) => {
          Idmood.push(item.orderId);
        });
        Idmood = Array.from(new Set(Idmood));
        Idmood = Idmood.join(",");
        let res = await this.$http.selfOperatedOrderApi.releaseOrder({
          orderId: Idmood,
        });
        ////console.log(res);
        if (res.data.code == 200) {
          this.$message.success("发布成功");
          this.getList();
        }
      } else {
        this.$message.warning("请选择发布项");
      }
    },
    clearUp() {
      // (this.supplierName = ""), //承运方
      this.orderNo = "", //订单编号
        // this.startTime = "", //开始时间
        // this.endTime = "", //结束时间
        // this.customerName = "", //接单人
        this.orderStatus = "", //订单状态
        // this.planName = "", //计划名称
        this.cargoName = "", //货主名称
        this.projectName = ""; //项目名称
      this.fleetName = ''
      this.searchValue = ''
      this.createTime = ''

      this.getList1();
    },
    changeUnfold() {
      this.isUnfold = !this.isUnfold;
    },
    changeSelect(val) {
      this.selectValue = val;
    },
    changeSearchValue(val) {
      this.searchValue = val;
    },


    getList1() {
      this.pageCurrent = 1;
      this.getList();
    },

    getList() {
      let params = {};


      if (this.selectValue == "orderNo") {
        ////console.log(this.searchValue);
        this.orderNo = this.searchValue;
      }
      this.searchArr.forEach(item => {
        if (this.selectValue == item.value) {
          this[item.value] = this.searchValue

        }
      })


      params = {
        current: this.pageCurrent,
        size: this.pageSize,

        orderNo: this.orderNo,
        // supplierName: this.supplierName, //接单人
        startTime: this.createTime != null ? this.createTime[0] : '', //开始时间
        endTime: this.createTime != null ? this.createTime[1] : '', //结束时间
        fleetName: this.fleetName,
        // customerName: this.customerName, //下单人
        cargoName: this.cargoName, //货主名称
        orderStatus: this.orderStatus, //订单状态
        // planName: this.planName, //计划名称

        projectName: this.projectName, //项目名称
      };
      ////console.log(params);
      httpApi.selfOperatedOrderApi.getOrderList(params).then((res) => {
        ////console.log("列表", res);
        this.records = res.data.data.records;

        this.data = res.data.data;


        ////console.log(res.data.data.records);
      });
    },
    // 列表数据选择变化时
    handleSelectionChange(val) {
      this.multipleSelection = val;
      let supplierIdArr = [];
      //数组转字符串
      this.multipleSelection.forEach((item) => {
        supplierIdArr.push(item.orderId);
      });
      this.multipleSelection = supplierIdArr.join(",");
      this.selectionLegth = supplierIdArr.length;
      ////console.log("批量选择", this.multipleSelection);
    },

    BatchOperation(val) {
      ////console.log(val);
      if (val == "批量取消") {
        this.$confirm("此操作将批量取消运单, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            // 发起批量删除请求
            if (this.multipleSelection != "") {
              let params = {
                orderId: this.multipleSelection,
              };
              ////console.log("批量取消传参", params);
              httpApi.selfOperatedOrderApi.orderCancel(params).then((res) => {
                ////console.log("批量取消", res);
                if (res.data.code == 200) {
                  this.getList(); //删除后 更新列表数据
                  this.$message({
                    type: "success",
                    message: "批量取消运单成功!",
                  });
                }
              });
            } else if (this.multipleSelection == "") {
              this.$message.warning("请选择取消项");
            }
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消操作",
            });
          });
        this.operateValue = "批量操作"; //重置
      }
    },
    DeleteItem(orderId) {
      ////console.log(orderId);
      this.$confirm("此操作将取消运单, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // 发起单个删除请求

          httpApi.selfOperatedOrderApi
            .orderCancel({ orderId: orderId })
            .then((res) => {
              ////console.log("取消结果", res);
              if (res.data.code == 200) {
                this.getList();
                //删除后 更新列表数据
                this.$message({
                  type: "success",
                  message: "取消成功!",
                });
              } else {
                this.$message({
                  type: "error",
                  message: "取消失败!",
                });
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消操作",
          });
        });
    },
    changePages(val) {
      //页码变化时
      this.pageCurrent = val.toString();
      this.getList();
    },
    // 记录滚动距离
    scrollEvent(res) {
      this.$route.meta.scrollTop = res.target.scrollTop
    },
  },
  activated() {
    this.getList();
    //组件激活时监听表格滚动条位置,
    this.$refs.registTable.bodyWrapper.addEventListener('scroll', this.scrollEvent, false)
    // 激活设置滚动位置
    this.$refs.registTable.bodyWrapper.scrollTop = this.$route.meta.scrollTop
  },
  beforeRouteLeave(to, from, next) {
    // 为了节省资源，再离开页面的时候关闭对于scroll事件的监听
    this.$refs.registTable.bodyWrapper.removeEventListener('scroll', this.scrollEvent)
    next()
  },


  mounted() {
    this.getList();
  },
  components: {
    breadcrumb,
  },
};
</script>

<style lang="scss" scoped>
.header {
  background-color: #ffffff;
  align-items: center;
  padding: 0 30px;
  margin-bottom: 8px;

  .searchBox {
    height: 76px;
    display: flex;
    align-items: center;

    ::v-deep .el-input__inner {
      height: 32px;
      line-height: 32px;
      padding: 10px 9px 9px;
    }

    ::v-deep .el-input__icon {
      line-height: 0;
    }

    ::v-deep .el-input-group__append {
      border: none;
    }

    .selectType {
      width: 90px;
      height: 32px;
      color: #262626;
      font-size: 12px;
      background-color: #ffffff;

      ::v-deep .el-input-group__prepend {
        height: 32px !important;
      }

      ::v-deep .el-input__inner {
        height: 30px;
        line-height: 30px;
        height: 32px;
        line-height: 32px;
        padding: 10px 9px 9px;
        //border-bottom: 1px solid #f0f0f0;
      }

      ::v-deep .el-input__inner {
        border: 1px solid #f0f0f0;
      }
    }

    .searchInput {
      width: 480px;
      height: 32px;
    }

    .searchBtn {
      background-color: #1890ff;
      color: #ffffff;
      font-size: 12px;
      width: 80px;
      height: 32px;
      border-radius: 0;
    }

    .zankai {
      color: #1890ff;
      font-size: 12px;
      margin-left: 19px;
      cursor: pointer;

      &:hover {
        opacity: 0.8;
        transition: 0.2s;
      }

      .UnfoldActive {
        transition: 0.3s;
        transform: rotateZ(180deg);
      }

      .el-icon-arrow-right {
        color: #1890ff;
        font-size: 12px;
      }
    }
  }

  .zankai_area {
    width: 100%;

    .inputBox {
      display: flex;
      margin-bottom: 16px;

      ::v-deep .el-input__inner {
        height: 32px;
        line-height: 32px;
        padding: 0 10px;
      }

      .label {
        font-size: 12px;
        width: 72px;
        line-height: 32px;
        height: 32px;
        text-align: right;
        color: #262626;
        margin-right: 8px;
      }

      .input {
        height: 32px;
        width: 225px;
        border-radius: 4px;
        border: 1px solid #f0f0f0;
        padding: 0 10px;
        font-size: 12px;

        &:focus {
          border: 1px solid #1890ff;
        }
      }

      .orderSelector {
        width: 225px;

        ::v-deep .el-input__icon {
          line-height: 0;
        }
      }

      .datePicker {
        ::v-deep .el-input__icon {
          display: none;
        }
      }
    }
  }
}

.main {
  background-color: #fff;
  // 64 + 76 +14+17 +16+8 =171
  height: calc(100vh - 243px);
  width: 100%;

  .main_head {
    padding: 0 30px 0 29px;
    display: flex;
    justify-content: space-between;
    height: 64px;
    align-items: center;

    .main_head_left {
      font-size: 12px;
      color: #262626;
    }

    .main_head_right {
      .addCargoOwner {
        background-color: #1890ff;
        border-radius: 4px;
        height: 32px;
        color: #ffffff;
        font-size: 12px;
        padding: 8px 17px 9px 17px;
        transition: 0.2s;
        cursor: pointer;
        margin-right: 17px;

        .iconBtn {
          margin-right: 7px;
          font-size: 15px;
        }

        &:hover {
          opacity: 0.8;
        }
      }

      .selector {
        width: 105px;
        height: 32px;
        color: #262626;
        font-size: 12px;
      }
    }
  }
}

.list {
  height: calc(100% - 82px);
  padding: 0 30px;

  ::v-deep .el-table__body-wrapper {
    height: calc(100vh - 372px);
    overflow-y: scroll;
  }

  // 表头样式
  ::v-deep .el-table__header th {
    background-color: #f0f6fd;
    color: #262626;
    font-size: 12px;
    font-weight: bold;
    text-align: left;
    height: 48px;
    padding: 0;

    // 表 body的td
    ::v-deep .el-table__body td {
      color: #595959;
      font-size: 12px;
    }
  }
}

.tag {
  width: 63px;
  height: 28px;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;

  .dian {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    margin-right: 4px;
  }

  // 待派车标签 样式
  &.waitDispatch {
    background-color: #fffce8;
    color: #f9aa0d;

    .dian {
      background-color: #f9aa0d;
    }
  }

  &.gery {
    background-color: #f7f8f8;
    color: #a8b0b6;

    .dian {
      background-color: #a8b0b6;
    }
  }

  //已派车 和运输中 样式
  &.dispatched {
    background-color: #ecf5fe;
    color: #1890ff;

    .dian {
      background-color: #1890ff;
    }
  }

  //已完成
  &.complete {
    background-color: #ebfef5;
    color: #1acb7a;

    .dian {
      background-color: #1acb7a;
    }
  }

  //已取消
  &.Canceled {
    background-color: #fde8e9;
    color: #f5222d;

    .dian {
      background-color: #f5222d;
    }
  }
}

.paginationBox {
  width: 100%;
  background-color: #fff;
  display: flex;
  height: 48px;
  border-top: 1px solid #f0f0f0;
  align-items: center;

  .pagination {
    margin-left: auto;
    margin-right: 30px;
  }
}
</style>
